<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('订单统计列表')"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <form id="formId">
            <div class="col-sm-12 search-collapse">
                <div class="radio">
                    统计方式:
                    <label style="margin-right: 5px">
                        <input type="radio" name="view" id="viewSex" checked>性别</label>
                    <label style="margin-right: 5px">
                        <input type="radio" name="view" id="viewAge">年龄</label>
                    <label style="margin-right: 5px">
                        <input type="radio" name="view" id="viewAddress">所在地区</label>
                    <label style="margin-right: 5px">
                        <input type="radio" name="view" id="viewPhoneBrand">设备品牌</label>
                    <label style="margin-right: 5px">
                        <input type="radio" name="view" id="viewPhoneModel">手机型号</label>
                    <label style="margin-right: 5px">
                        <input type="radio" name="view" id="viewAndroidVersion">安卓版本</label>
                    <label style="margin-right: 5px">
                        <input type="radio" name="view" id="viewResolve">手机分辨率</label>
                    <label style="margin-right: 5px">
                        <input type="radio" name="view" id="viewChannelId">渠道</label>
                    <label style="margin-right: 5px">
                        <input type="radio" name="view" id="viewProductId">应用</label>
                    <label style="margin-right: 5px">
                        <input type="radio" name="view" id="viewPayType">支付方式</label>
                </div>
                <div class="select-list">
                    <ul>
                        <li>
                            开始时间：
                            <input type="text" class="time-input" placeholder="请选择开始时间" name="startCreateTime"
                                   th:value="${#dates.format(startCreateTime, 'yyyy-MM-dd')}"/>
                        </li>
                        <li>
                            截止时间：
                            <input type="text" class="time-input" placeholder="请选择结束时间" name="endCreateTime"
                                   th:value="${#dates.format(endCreateTime, 'yyyy-MM-dd')}"/>
                        </li>
                        <li>
                            <label>渠道：</label>
                            <select name="channelId">
                                <option value="">请选择渠道</option>
                                <option th:each="channel:${channelList}" th:text="${channel.name}"
                                        th:value="${channel.code}"></option>
                            </select>
                        </li>
                        <li>
                            <label>应用：</label>
                            <select id="productId" name="productId" onchange="selectProduct()">
                                <option value="">请选择应用</option>
                                <option th:each="product:${productList}" th:text="${product.name}"
                                        th:value="${product.id}"></option>
                            </select>
                        </li>
                        <li>
                            <label>服务：</label>
                            <select id="goodsTypeId" name="goodsTypeId">
                                <option value="">请选择服务</option>
                            </select>
                        </li>
                        <li>
                            <label>支付方式：</label>
                            <select name="payType" id="payType">
                                <option value="">请选择支付方式</option>
                                <option value="alipay">支付宝</option>
                                <option value="wxpay">微信</option>
                            </select>
                        </li>

                        <li>
                            <label>支付状态：</label>
                            <select name="status" id="status">
                                <option value="">请选择支付状态</option>
                                <option value="0">未支付</option>
                                <option value="1" selected>已支付</option>
                                <option value="2">退款中</option>
                                <option value="3">已退款</option>
                            </select>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="onSearch()"><i
                                    class="fa fa-search"></i>&nbsp;查询</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </div>
            <input type="hidden" name="itemScale" id="itemScale" value="0">
        </form>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-show-footer="true"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
        var prefix = ctx + "product/orderStatis";

        $(function() {
            $('#itemScale').val(0);

            if($('#viewAge').is(':checked')) {
                itemScale = 1;
            }
            if($('#viewAddress').is(':checked')) {
                itemScale = 2;
            }
            if($('#viewPhoneBrand').is(':checked')) {
                itemScale = 3;
            }
            if($('#viewPhoneModel').is(':checked')) {
                itemScale = 4;
            }
            if($('#viewAndroidVersion').is(':checked')) {
                itemScale = 5;
            }
            if($('#viewResolve').is(':checked')) {
                itemScale = 6;
            }
            if($('#viewChannelId').is(':checked')) {
                itemScale = 7;
            }
            if($('#viewProductId').is(':checked')) {
                itemScale = 8;
            }
            if($('#viewPayType').is(':checked')) {
                itemScale = 9;
            }
            var options = {
                url: prefix + "/scaleList",
                modalName: "订单统计",
                columns: [{
                    checkbox: true
                },
                    {
                        field: 'id',
                        title: '${comment}',
                        visible: false
                    },
                    {
                        field: 'returnItem',
                        title: '类别',
                        formatter: function(value, row, index) {
                            if($('#itemScale').val() == 0){
                                if (value == "0") {
                                    return "女";
                                } else if (value == "1") {
                                    return "男";
                                } else if (value == "2") {
                                    return "未知";
                                } else {
                                    return value;
                                }
                            }
                            return value;
                        }
                    },
                    {
                        field: 'returnCount',
                        title: '数量'
                    },
                {
                    field: 'returnCountAmount',
                    title: '总金额'
                },
                    {
                        field: 'returnScale',
                        title: '比例'
                    },
                ]
            };
            $.table.init(options);
        });

    function onSearch() {
        $('#itemScale').val(0);
        if($('#viewAge').is(':checked')) {
            $('#itemScale').val(1);
        }
        if($('#viewAddress').is(':checked')) {
            $('#itemScale').val(2);
        }
        if($('#viewPhoneBrand').is(':checked')) {
            $('#itemScale').val(3);
        }
        if($('#viewPhoneModel').is(':checked')) {
            $('#itemScale').val(4);
        }
        if($('#viewAndroidVersion').is(':checked')) {
            $('#itemScale').val(5);
        }
        if($('#viewResolve').is(':checked')) {
            $('#itemScale').val(6);
        }
        if($('#viewChannelId').is(':checked')) {
            $('#itemScale').val(7);
        }
        if($('#viewProductId').is(':checked')) {
            $('#itemScale').val(8);
        }
        if($('#viewPayType').is(':checked')) {
            $('#itemScale').val(9);
        }

        var options = {
            url: prefix + "/scaleList",
            modalName: "订单统计",
            columns: [{
                checkbox: true
            },
                {
                    field: 'id',
                    title: '${comment}',
                    visible: false
                },
                {
                    field: 'returnItem',
                    title: '类别',
                    formatter: function(value, row, index) {
                        if($('#itemScale').val() == 0){
                            if (value == "0") {
                                return "女";
                            } else if (value == "1") {
                                return "男";
                            } else if (value == "2") {
                                return "未知";
                            } else {
                                return value;
                            }
                        }
                        return value;
                    }
                },
                {
                    field: 'returnCount',
                    title: '数量'
                },
                {
                    field: 'returnCountAmount',
                    title: '总金额'
                },
                {
                    field: 'returnScale',
                    title: '比例'
                },
            ]
        };
        $.table.refreshOptions(options,"bootstrap-table");
        $.table.search();
    }

        function selectProduct() {
            var productId = $("#productId").val();
            $.ajax({
                type: "GET",
                url: prefix + "/addChangeProduct?productId="+productId,
                cache: false,
                dataType: 'json',
                success: function(result) {
                    if (result) {
                        var html = "<option value=''>请选择服务</option>";
                        for (var i = 0; i < result.length; i++) {
                            html += "<option value='" + result[i].id + "'>" + result[i].name + "</option>"
                        }
                        $('#goodsTypeId').html(html);
                    } else {
                        $.modal.alertError(result.msg);
                    }
                },
                error: function(error) {
                    $.modal.alertWarning("失败。");
                }
            });
        }


</script>
</body>
</html>